<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Admin
  Date: 2021/7/16
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/axios-0.21.0.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
<button id="addButton" onclick="add()">添加</button>
<form action="" style="display: none" id="addHero">
    名字<input type="text" name="heroName" id="add1"><br>
    系别<input type="text" name="category" id="add2"><br>
    血量<input type="text" name="blood" id="add3"><br>
    攻击<input type="text" name="atk" id="add4"><br>
    防御<input type="text" name="def" id="add5"><br>
    描述<input type="text" name="des" id="add6"><br>
    <input type="button" onclick="addHero()" value="提交">
</form>
<form action="" style="display: none" id="updateHero">
    <input type="text" name="heroId" id="update1" hidden><br>
    名字<input type="text" name="heroName" id="update2"><br>
    系别<input type="text" name="category" id="update3"><br>
    血量<input type="text" name="blood" id="update4"><br>
    攻击<input type="text" name="atk" id="update5"><br>
    防御<input type="text" name="def" id="update6"><br>
    描述<input type="text" name="des" id="update7"><br>
    <input type="button" onclick="updateHero()" value="提交">
</form>
<table border="1">
    <thead>
    <th>编号</th>
    <th>英雄名</th>
    <th>分类</th>
    <th>血量</th>
    <th>攻击</th>
    <th>防御</th>
    <th>描述</th>
    <th>操作</th>
    </thead>
    <tbody>
    </tbody>
</table>
<P>

</P>
<script>
    let pageNum=1;
    let pageSize=2;
    window.onload=show();
    function show(){
        document.querySelector("tbody").innerHTML="";
        axios.get(
            "${pageContext.request.contextPath}/heroes",
            {params:{
                    pageNum,pageSize
                }}
        ).then(resp=>{
            let r=resp.data;
            let heroes=r.data.list;
            let pages=r.data.pages;
            let tbody="";
            for(let i=0;i<heroes.length;i++){
                let tr="<tr>";
                tr+="<td>"+heroes[i].heroId+"</td>";
                tr+="<td>"+heroes[i].heroName+"</td>";
                tr+="<td>"+heroes[i].category+"</td>";
                tr+="<td>"+heroes[i].blood+"</td>";
                tr+="<td>"+heroes[i].atk+"</td>";
                tr+="<td>"+heroes[i].def+"</td>";
                tr+="<td>"+heroes[i].des+"</td>";
                tr+="<td><button onclick='removeHero("+heroes[i].heroId+")'>删除</button>" +
                    "<button onclick='update("+heroes[i].heroId+")'>更新</button></td>";
                tr+="</tr>";
                tbody+=tr;
            }
            document.querySelector("tbody").innerHTML+=tbody;
            let button = "";
            for(let i = 1; i <= pages; i++){
                button += "<button style='margin:0 10px' onclick='handleShow("+i+")'>"+i+"</button>";
            }
            document.querySelector("p").innerHTML=button;
        }).catch(error=>{
            console.log(error);
        });
    }
    function handleShow(page){
        pageNum = page;
        show();
    }
    function add(){
        document.querySelector("table").style.display="none";
        document.querySelector("#addHero").style.display="block";
        document.querySelector("#addButton").style.display="none";
    }
    function addHero(){
        let heroName=document.querySelector("#add1").value;
        let category=document.querySelector("#add2").value;
        let blood=document.querySelector("#add3").value;
        let atk=document.querySelector("#add4").value;
        let def=document.querySelector("#add5").value;
        let des=document.querySelector("#add6").value;
        let hero={
            heroName:heroName,
            category:category,
            blood:blood,
            atk:atk,
            def:def,
            des:des
        };
        axios.post(
            "${pageContext.request.contextPath}/heroes",
            hero
        ).then(resp=>{
            let r=resp.data;
            if(r.code==200&&r.message=="success"){
                alert("添加成功");
                show();
                document.querySelector("table").style.display="block";
                document.querySelector("#addHero").style.display="none";
                document.querySelector("#addButton").style.display="block";
            }else {
                alert("添加失败");
            }

        }).catch(error=>{
            console.log(error);
        });
    }
    function updateHero(){
        let heroId=document.querySelector("#update1").value;
        let heroName=document.querySelector("#update2").value;
        let category=document.querySelector("#update3").value;
        let blood=document.querySelector("#update4").value;
        let atk=document.querySelector("#update5").value;
        let def=document.querySelector("#update6").value;
        let des=document.querySelector("#update7").value;
        let hero={
            heroId:heroId,
            heroName:heroName,
            category:category,
            blood:blood,
            atk:atk,
            def:def,
            des:des
        };
        axios.put(
            "${pageContext.request.contextPath}/heroes",
            hero
        ).then(resp=>{
            let r=resp.data;
            if(r.code==200&&r.message=="success"){
                alert("更新成功");
                show();
                document.querySelector("table").style.display="block";
                document.querySelector("#updateHero").style.display="none";
                document.querySelector("#addButton").style.display="block";
            }else {
                alert("更新失败");
            }
        }).catch(error=>{
            console.log(error);
        });
    }
    function update(id){
        document.querySelector("table").style.display="none";
        document.querySelector("#updateHero").style.display="block";
        document.querySelector("#addButton").style.display="none";
        axios.get(
            "${pageContext.request.contextPath}/heroes/"+id
        ).then(resp=>{
            let hero=resp.data.data;
            document.querySelector("#update1").value=hero.heroId;
            document.querySelector("#update2").value=hero.heroName;
            document.querySelector("#update3").value=hero.category;
            document.querySelector("#update4").value=hero.blood;
            document.querySelector("#update5").value=hero.atk;
            document.querySelector("#update6").value=hero.def;
            document.querySelector("#update7").value=hero.des;
        }).catch(error=>{
            console.log(error);
        });
    }
    function removeHero(id) {
        axios.delete(
            "${pageContext.request.contextPath}/heroes/"+id
        ).then(resp=>{
            let r=resp.data;
            if(r.code==200&&r.message=="success"){
                alert("删除成功");
                show();
            }else {
                alert("删除失败");
            }
        }).catch(error=>{
            console.log(error);
        });
    }
</script>
</body>
</html>
